Xara Webster 2.0 - Creating a Button Bitmap

This page shows you how to create a bitmap button for a web page using Xara Webster like this :

The step by step instructions show you how to import a button from the Clipart Gallery, change its color and export it as a GIF file.

1. Import the Button

Open the Clipart Gallery by choosing Clipart Gallery from the Utilities menu.
Scroll down the gallery until you reach the button or image you want to load.
Click on the image to select it.
Click the Import button at the top of the Clipart Gallery.

2. Set the Background

Xara Webster uses a technique called anti-aliasing to make the edges of objects look really smooth. It's almost like creating a tiny fade between the object and its background. To get the best results, it's important to create the bitmap with the correct background behind the image so when the edges are anti-aliased, it's done using the correct background colors. For more information on this, see Creating Smooth Bitmap Edges.

Decide the color of the background behind the button. The buttons are designed for display against a white background but you can easily change this. If you want a white background, just ignore this section.
To set the background to a color, create a new color in the Color Gallery, click on it and click the Background button. Or to set the background to a bitmap, select the bitmap in the Bitmap Gallery or the Fill Gallery and click the Background button (you may need to download the file first).

3. Change the Color of the Button

Open the Color Gallery. The section for your drawing will show one or more colors. One color will be called "Button color", "Button Red" or similar. (The name depends on which button you've imported.) This is the color you want to edit.
Click on the color in the Color Gallery to select it.
Click the Edit button in the Color Gallery. This opens the Color Editor and displays Button Color ready for editing.
Make any required changes. For example, make the button blue.
When you have finished changing the color, click the "Browser Palette" button in the Color Editor. This snaps the color to the nearest color in the Netscape Navigator and Internet Explorer palette. Using colors from this palette gives better results in the final image.
If you wish, you can close the Color Editor and Color Gallery. This gives you more space on the screen.

4. Create the GIF File

Select only the button. Make sure the background rectangle (if you used one) isn't selected.
1. If the Selector Tool is not the current tool, choose it.
2. Click on the button to select it.
Open the Export dialog box. (Choose Export from the File menu.)
In the Export dialog box choose a suitable filename.
In the Export dialog box select Compuserve GIF as the export option.
Click "Save". This opens the GIF Export dialog box. This dialog box includes a range of options for creating the bitmap and you can also see what the final bitmap will look like before you export it. For more details, see Creating GIF Files
You only need to change the Width and Height fields if you want to make GIF image larger or smaller than the original. If you're putting the image onto a web page select the "Put HTML image tag on clipboard" option. This places the HTML you need to insert the image in a web page on the clipboard. To insert the image into a web page all you do is place the cursor where you want the image and press CTRL-V.
Click "Export" to save the GIF. "Export A" exports the left image, "Export B" exports the right image. To swap images, click on one.

5. Put the Image on Your Web Page Using HTML

You can insert your picture into the HTML for your web page with a command like this :

When someone looks at your page using a browser that does not or cannot display pictures, the ALT (alternative) text will be shown on the screen instead of your picture.
If you include the width and height of the file in the HTML, people looking at your page will not need to download all the images before the page is displayed as the browser already knows what size they are and can display the rest of the page correctly.
You can enter any values into the WIDTH and HEIGHT entries which makes it very easy to scale and stretch images.
To help you Xara Webster can place a simple HTML tag on the clipboard for you when you create a bitmap. Look in the Bitmap Size tab.

Did this page help you? If not, please email us to tell us why not so we can improve it.

_______________